@model ProductModel

<div class="card-body">
    @await Html.PartialAsync("Table", new DataTablesModel
    {
        Name = "productpictures-grid",
        UrlRead = new DataUrl("ProductPictureList", "Product", new RouteValueDictionary { [nameof(Model.ProductPictureSearchModel.ProductId)] = Model.ProductPictureSearchModel.ProductId }),
        UrlDelete = new DataUrl("ProductPictureDelete", "Product", null),
        UrlUpdate = new DataUrl("ProductPictureUpdate", "Product", null),
        Length = Model.ProductPictureSearchModel.PageSize,
        LengthMenu = Model.ProductPictureSearchModel.AvailablePageSizes,
        ColumnCollection = new List<ColumnProperty>
            {
                new ColumnProperty(nameof(ProductPictureModel.PictureUrl))
                {
                    Title = T("Admin.Catalog.Products.Multimedia.Pictures.Fields.Picture").Text,
                    Render = new RenderCustom("renderPicturesColumnProductPictureUrl"),
                    ClassName = "text-center preview",
                    Width = "150"
                },
                new ColumnProperty(nameof(ProductPictureModel.DisplayOrder))
                {
                    Title = T("Admin.Catalog.Products.Multimedia.Pictures.Fields.DisplayOrder").Text,
                    Width = "150",
                    ClassName = NopColumnClassDefaults.CenterAll,
                    Editable = true,
                    EditType = EditType.Number
                },
                new ColumnProperty(nameof(ProductPictureModel.OverrideAltAttribute))
                {
                    Title = T("Admin.Catalog.Products.Multimedia.Pictures.Fields.OverrideAltAttribute").Text,
                    Width = "200",
                    Editable = true,
                    EditType = EditType.String
                },
                new ColumnProperty(nameof(ProductPictureModel.OverrideTitleAttribute))
                {
                    Title = T("Admin.Catalog.Products.Multimedia.Pictures.Fields.OverrideTitleAttribute").Text,
                    Width = "200",
                    Editable = true,
                    EditType = EditType.String
                },
                new ColumnProperty(nameof(ProductPictureModel.Id))
                {
                    Title = T("Admin.Common.Edit").Text,
                    Width = "200",
                    ClassName =  NopColumnClassDefaults.Button,
                    Render = new RenderButtonsInlineEdit()
                },
                new ColumnProperty(nameof(ProductPictureModel.Id))
                {
                    Title = T("Admin.Common.Delete").Text,
                    Width = "100",
                    Render = new RenderButtonRemove(T("Admin.Common.Delete").Text),
                    ClassName = NopColumnClassDefaults.Button
                }
            }
    })
        
    <script>
        function renderPicturesColumnProductPictureUrl(data, type, row, meta) {
            return '<a href="' + row.PictureUrl + '" target="_blank"><img alt="' + row.PictureId + '" src="' + row.PictureUrl + '" /></a>';
        }
    </script>

    <div class="card card-default">
        <div class="card-header">
            @T("Admin.Catalog.Products.Multimedia.Pictures.AddNew")
        </div>
        <div class="card-body">
            <div class="form-group row">
                @{
                    ViewData["Endpoint"] = this.Url.Action("ProductPictureAdd", "Product", new { productId = Model.Id });
                    ViewData["TableSelector"] = "#productpictures-grid";
                }
                <div class="col-md-3">
                    <nop-label asp-for="AddPictureModel.PictureId" />
                </div>
                <div class="col-md-9">
                    <nop-editor asp-for="AddPictureModel.PictureId" />
                    <span asp-validation-for="AddPictureModel.PictureId"></span>
                </div>
            </div>
        </div>
    </div>
</div>
